<template>
    <div>
        <mt-header title="代理充值">
            <router-link to="/" slot="left">
                <i class="mintui mintui-back lic-d"></i>
            </router-link>
        </mt-header>
        <!-- 搜索框 -->
        <div class="search">
            <input type="text" placeholder="请输入代理充值ID" v-model="agentId">
            <span class="mint-toast-icon mintui mintui-search dwicon" @touchend="getsearh"></span>
        </div>
        <div class="v-cloak" v-if="agentData" v-for="(item,i) in agentData" :key="i">
            <p><span>代理ID：</span><span>{{item.agentID}}</span></p>
            <p><span>代理昵称：</span><span>{{item.agentName}}</span></p>
            <div class="clo">
                <span>当前房卡：</span><span>{{item.gems}}</span>
                <input type="text" placeholder="请输入充值数量" v-model="gems">
                <button class="ton" @touchend="getaddAgentGems">充值</button>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        searh,
        addAgentGems
    } from '../api/api'
    import {
        Toast
    } from 'mint-ui';
    export default {
        data() {
            return {
                agentId: '',
                agentData: [],
                gems: ''
            }
        },
        methods: {
            getsearh() {
                searh(this.agentId).then(res => {
                    if (res.data.code == 0) {
                        // console.log(res.data)
                        this.agentData = res.data.data
                    }else{
                        Toast('没有该代理ID'); 
                    }
                })
            },
            getaddAgentGems() {
                // console.log(sessionStorage.getItem("token"))
                if(this.agentId == 'admin'){
                    Toast("管理员不能给自己充值");
                     return false
                };
                if (this.gems > 0) {
                    addAgentGems(this.agentId, this.gems).then(res => {
                        this.getsearh()
                        Toast('充值成功');
                        console.log(res.data)
                        this.gems = ''
                    })
                } else {
                    Toast('请输入正确的房卡');
                }
            }
        }
    }
</script>


<style lang="less" scoped>
    a {
        text-decoration: none;
    }
    .lic-d {
        font-size: 50px;
    }
    .mint-header {
        background: -webkit-linear-gradient(left, #6180F4, #79CBFA);
        font-size: 36px;
        height: 80px;
    }
    .search {
        width: 100%;
        height: 90px;
        box-sizing: border-box;
        padding: 12px 54px;
        position: relative;
        input {
           width: 100%;
            height: 100%;
            padding-left: 20px;
            background-color: #F4F4F4;
            border: none;
            border-radius: 10px;
            outline: none;
            border-bottom: 2px solid #cccccc;
            border-top: 2px solid #cccccc;
            border-left: 2px solid #cccccc;
        }
        .dwicon {
            position: absolute;
            top: 14px;
            right: 56px;
            height: 60px;
            line-height: 60px;
            width: 100px;
            color: #fff;
            font-size: 40px;
            color: #000;
            border-radius: 10px;
            border-left: 2px solid #cccccc;
            border-right: 2px solid #cccccc;
        }
    }
    .v-cloak {
        padding: 0 20px;
        border: 2px solid #cccccc;
        border-radius: 10px;
        margin: 20px 60px;
        box-sizing: border-box;
        background-color: #fff;
        margin-bottom: 10px;
        font-size: 36px;
        p {
            padding: 0;
            margin: 0;
            color: #949494;
            font-size: 30px;
            margin-top: 12px;
        }
        .clo {
            margin-top: 24px;
            color: #949494;
            font-size: 26px;
            margin-bottom: 20px;
            input {
                width: 260px;
                height: 50px;
                background-color: #E5E5E5;
                border-radius: 10px;
                outline: 0;
                border: 0;
                border: 2px solid #cccccc;
                margin-left: 20px;
            }
            .ton {
                height: 50px;
                width: 70px;
                outline: 0;
                border: 0;
                border-radius: 10px;
                background-color: #74B1F3;
                color: #ffffff;
                float:right;
            }
        }
    }
    input::-webkit-input-placeholder {
        font-size: 28px;
        padding-left: 10px;
        color: #ccc;
    }
</style>
